<template>
  <div class="region-point-switch">
    <div
      v-for="(item, index) in tab"
      :key="index"
      :class="{ active: activeName === index }"
      @click="switchTab(item, index)"
    >
      {{ item }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { fireInsuranceStore } from '@/pages/forestry/store/store'
const fireStore = fireInsuranceStore()
const props = defineProps({
  tab: {
    type: Array,
    default: () => {
      return ['实况', '预报']
    }
  }
})
const activeName = ref(0)
const switchTab = (name, index) => {
  activeName.value = index
  fireStore.gdskjcCurrentActive = name
  fireStore.NavActive = ''
  useEventBus('handleInitCameraPosition').emit()
  if (name == '预报') {
    fireStore.moduleVisible.ybModule = true
    fireStore.moduleVisible.skModule = false
    fireStore.componentsVisible.SBT = true
    fireStore.componentsVisible.GDZ = false
  } else {
    fireStore.gdskjcCurrentActive = 'none'
    fireStore.moduleVisible.skModule = true
    fireStore.moduleVisible.ybModule = false
  }
}
onMounted(() => {})
</script>
<style scoped lang="scss">
.region-point-switch {
  width: 394px;
  height: 47px;
  background: url(../images/switch.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  justify-content: center;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  div {
    width: 50%;
    text-align: center;
    line-height: 47px;
    color: #c3d5db;
    font-size: 22px;
    text-shadow: 0px 0px 3px #03fdff;
    &.active {
      color: #ffffff;
      text-shadow: 0px 0px 3px #04fdff;
    }
  }
}
</style>
